LearnIncrease Site Performance With CSS Hardware Acceleration

Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU (Graphics Processing Unit) for better rendering performance in the browser?

Computers have graphics cards suitable for CSS hardware acceleration. Because of this, we can leverage GPU power for those heavier features so that our sites and applications can perform faster than is possible in browsers running on the CPU.

In this article, we’ll cover the use of CSS hardware acceleration on desktop and mobile browsers.

CSS Hardware Acceleration on Desktop and Mobile Browsers

Ever wondered how some CSS animations run so smoothly in the browser?

CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine.

So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU-accelerated rendering using certain CSS rules.

Currently, browsers like Chrome, FireFox, Edge, and Safari all ship with hardware acceleration. With CSS, the strongest indication of acceleration is that a 3D transformation is being applied to an element.

For example:

.cube {
   -webkit-transform: translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5, 0.5, 0.5);
}

In some cases, you might not want a 3D transformation on the element, but still wish to take advantage of GPU acceleration. That’s when a few simple CSS properties come in handy that trick the browser into triggering GPU-accelerated rendering.

Even though we’re not animating an element in 3D space, we can enable 3D rendering. At the very least, the transform: translateZ(0); declaration triggers GPU acceleration in modern desktop and mobile browsers.

This seems to be the most effective way of triggering GPU acceleration (all vendor prefixes included):

.cube {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
   /* Other transform properties here */
}

In Chrome and Safari we might see a flickering effect when using CSS transforms or animations. The following declarations can be used to fix the issue:

.cube {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
   /* Other transform properties here */
}

Another method that seems to work well in WebKit-powered desktop and mobile browsers is translate3d:

.cube {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

Native mobile applications also make good use of the device GPU –– that’s why they’re known to perform slightly better than Web apps. Using CSS hardware acceleration can be especially useful on mobile devices because it helps reduce resource consumption on the device.

GPU-Accelerated Rendering in CSS: Final Thoughts

The methods we covered should only be used on the elements we’re animating. They might improve performance on 2D transforms, but it’s not wise to use them on everything just for the sake of hardware acceleration.

Be careful with each of these methods and only use them if you experience a true performance win. Using the GPU unnecessarily can cause significant performance issues because it increases memory use –– it will also affect the battery life on mobile devices.

Learn More About CSS With Treehouse

Want to learn even more about CSS? Treehouse offers a wide range of courses and tracks to help you do just that. Whether you’re a beginner programmer or a seasoned coder, we have a course for you. Get started today by signing up for a free trial of Treehouse.

• code
• css
• css3
• learn programming
• make a website